<template>
  <swiper :options="swiperOption" ref="mySwiper" style="height:100%">
    <!-- slides -->
    <swiper-slide class="page-one">
      <div class="page-inner">
        <div class="page1-left">
          <div class="page1-left-top">
            <img src="../assets/left-top.png" alt="" style="width:100%">
          </div>
          <div class="page1-left-middle">
            <ul class="ul-text">
              <li class="page1-anim-text">
                <span>全品种</span>
              </li>
              <li class="page1-anim-text">
                <span>全过程</span>
              </li>
              <li class="page1-anim-text" id="page1-anim-last">
                <span>全区域</span>
              </li>
            </ul>
          </div>
          <div class="page1-left-bottom  hidden" id="page1-anim-button">
            <router-link to="Login">
              <el-button class="el-button--primary">注册/登录</el-button>
            </router-link>
          </div>
        </div>
        <div class="page1-right">
          <img src="../assets/computer.png" class="hidden" id="page1-anim-computer" alt="" style="width:100%">
        </div>
      </div>
      <img src="../assets/arrow.svg" alt="" class="nextButton">

    </swiper-slide>
    <!-- page2 -->
    <swiper-slide class="page-two">
      <div class="page-inner">
        <div class="page2-left">
          <div class="image-wrap">
            <img src="../assets/index/page2-left.png" alt="" style="width:100%;">
            <div class="image-icon image-left-icon" id="bigMirror">
              <img src="../assets/index/page2-left-icon.png" alt="">
            </div>
          </div>
          <div class="page2-text ">
            <p>提供多种追溯码制（二维码，各种一维条码等）支持以及通用数据接口，以方便不同企业的数据信息整合。</p>
          </div>
        </div>
        <div class="page2-right">
          <div class="image-wrap">
            <img src="../assets/index/page2-right.png" alt="" style="width:100%;">
            <div class="image-icon image-right-icon-1" id="page2-anim-1">
              <img src="../assets/index/page2-right-icon-1.png" alt="">
            </div>
            <div class="image-icon image-right-icon-2" id="page2-anim-2">
              <img src="../assets/index/page2-right-icon-2.png" alt="">
            </div>
            <div class="image-icon image-right-icon-3" id="page2-anim-3">
              <img src="../assets/index/page2-right-icon-3.png" alt="">
            </div>
            <div class="image-icon image-right-icon-4" id="page2-anim-4">
              <img src="../assets/index/page2-right-icon-4.png" alt="">
            </div>
          </div>
          <div class="page2-text">
            <p>衔接上海地区医药产品的政府监管部门、生产经营企业、使用单位（医药机构、药品检验）、消费者。形成追溯数据统一共享交换机制。
            </p>
          </div>
        </div>
      </div>
      <img src="../assets/arrow.svg" alt="" class="nextButton">
    </swiper-slide>
    <swiper-slide class="page-three">
      <div class="page-inner">
        <div class="page3-left">
          <div class="page3-card hidden">
            <div class="card-title">
              <span>全流程</span>
            </div>
            <div class="card-title-sub">
              <span>追溯</span>
            </div>
            <div class="card-content">
              <p>平台对医药产品的追溯包括从生产出厂、流通、运输、贮存直至配送到医疗机构、零售药店的全过程。</p>
            </div>
          </div>
        </div>
        <div class="page3-center">
          <div class="page3-card hidden">
            <div class="card-title">
              <span>全品类</span>
            </div>
            <div class="card-title-sub">
              <span>追溯</span>
            </div>
            <div class="card-content">
              <p>追溯平台对医药产品的追溯品类将依据各品种属性和相关要求，将产品分门别类，按照循序渐进方的式分步纳入平台，最终逐步扩展到医药产品全品类。</p>
            </div>
          </div>
        </div>
        <div class="page3-right">
          <div class="page3-card hidden">
            <div class="card-title">
              <span>全区域</span>
            </div>
            <div class="card-title-sub">
              <span>追溯</span>
            </div>
            <div class="card-content">
              <p>追溯平台坚持率先立足上海，覆盖长三角，最终辐射至全国。
              </p>
            </div>
          </div>
        </div>
      </div>
      <img src="../assets/arrow.svg" alt="" class="nextButton">

    </swiper-slide>
    <swiper-slide class="page-four">
      <div class="page-inner">
        <div class="page4-left">
          <div class="page4-left-top hidden">
            <div class="image-wrap">
              <img src="../assets/index/page4-icon-1.svg" alt="">
            </div>
            <div class="page4-text">
              <p class="page4-title">监管部门</p>
              <p style="font-size:20px">方便快速地对药品在生产，流通及使用过程中产生的问题进行检索和核查，提高制售假劣药的成本。</p>
            </div>
            <div class="page-cycle"></div>
          </div>
          <div class="page4-left-bottom hidden">
            <div class="image-wrap">
              <img src="../assets/index/page4-icon-3.svg" alt="">
            </div>
            <div class="page4-text">
              <p class="page4-title">消费者</p>
              <p style="font-size:20px">了解产品所有的生产流通信息，有效甄别不合格药品，提高用药安全性。
              </p>
            </div>
            <div class="page-cycle"></div>
          </div>

        </div>
        <div class="page4-right hidden">
          <div class="image-wrap">
            <img src="../assets/index/page4-icon-2.svg" alt="">
          </div>
          <div class="page4-text">
            <p class="page4-title">生产流通企业</p>
            <p style="font-size:20px">进一步规范药品生产和流通企业的生产经营行为，防控产品质量问题带来的风险。
            </p>
          </div>
          <div class="page-cycle"></div>
        </div>
      </div>
<img src="../assets/arrow.svg" alt="" class="nextButton">
    </swiper-slide>
    <swiper-slide class="page-five">
      <div class="page5 page-inner">
        <p>上海数图健康医药科技有限公司（中国医药工业信息中心），是上海市高新技术企业。作为专业从事医药信息的研究咨询机构，上海数图健康医药科技有限公司（中国医药工业信息中心）一方面履行医药工业信息统计、医药经济运行分析和管理的职能，为政府部门提供有力的依据和建议；另一方面连接医药相关政府部门、医疗机构，以及全国数千家医药企业，为企业的技术项目、产品开发和市场规划提供全方位的医药信息支持以及相应的解决方案，并且通过多种媒体渠道向中国医药行业传播权威、专业、快速、准确且颇具特色的行业资讯。</p>
      </div>
      <div class="page-footer">
        <ul class="company-info">
          <li>
            <div class="image-wrap">
              <img src="../assets/index/phone.svg" alt="">
            </div>
            <p>Tel：021-62589200</p>
          </li>
          <li>
            <div class="image-wrap">
              <img src="../assets/index/address.jpg" alt="" style="height:50px">
            </div>
            <p>Address：上海市静安区北京西路1320号3号楼</p>
          </li>
          <li>
            <div class="image-wrap">
              <img src="../assets/index/mail.svg" alt="">
            </div>
            <p>Email：marketing@pharmadl.com</p>
          </li>
        </ul>
      </div>
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
  <!-- <div class="page-wrap">
    <div class="page-one"></div>
    <div class="page-two"></div>
    <div class="page-three"></div>
    <div class="page-four"></div>
    <div class="page-five"></div>
  </div> -->
</template>

<script>
  import china from '../../static/css/swiper-3.4.2.min.css'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        show: false,
        currentPage: 0,
        swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
          // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
          notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
          // autoplay: 3000,
          direction: 'vertical',
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          prevButton: '', //上一张
          nextButton: '', //下一张
          scrollbar: '.swiper-scrollbar', //滚动条
          mousewheelControl: true,
          observeParents: true,
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
          debugger: true,
          onSlideChangeStart: swiper => {
            this.currentPage = swiper.activeIndex
            console.log(this.currentPage);
            this.addAnimate()
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
    },
    mounted: function () {
      console.log(this.swiper)
      console.log(this.currentPage)
      // $('#nextBttton').addClass('animated infinite bounce');
      $('.page1-anim-text').addClass('bounceInUp')
      $('#page1-anim-last').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function () {
          $('#page1-anim-button').removeClass('hidden').addClass('animated fadeIn')
          $('#page1-anim-computer').removeClass('hidden').addClass('animated fadeIn')
        });
    },
    methods: {
      addAnimate: function () {
        switch (this.currentPage) {
          case 0:
            console.log(this.currentPage)
            $('.page1-anim-text').addClass('bounceInUp')
            $('#page1-anim-last').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
              function () {
                $('#page1-anim-button').addClass('animated bounceInUp')
              });
            break;
          case 1:
            $('#bigMirror').animate({
              left: '45%'
            }, 1000, 'swing', function () {
              $('#bigMirror').animate({
                left: '47%'
              }, 1000, 'swing', )
            })
            $('#page2-anim-1').animate({
              top: '50%',
              left: '15%'
            }, 2000, 'swing', function () {
              $('#page2-anim-1').animate({
                top: '70%',
                left: '20%'
              }, 2000)
            })

            $('#page2-anim-2').animate({
              top: '85%',
              left: '60%'
            }, 2000, 'swing', function () {
              $('#page2-anim-2').animate({
                top: '86%',
                left: '65%'
              }, 2000)
            })

            $('#page2-anim-3').animate({
              top: '37%',
              left: '85%'
            }, 2000, 'swing', function () {
              $('#page2-anim-3').animate({
                top: '27%',
                left: '80%'
              }, 2000)
            })
            $('#page2-anim-4').animate({
              top: '20%',
              left: '50%'
            }, 2000, 'swing', function () {
              $('#page2-anim-4').animate({
                top: '20%',
                left: '45%'
              }, 2000)
            })
            break;
          case 2:
            $('.page3-card').removeClass('hidden').addClass('animated fadeInUp')
            break;
          case 3:
            $('.page4-left-top').removeClass('hidden').addClass('animated fadeInLeft')
            $('.page4-left-bottom').removeClass('hidden').addClass('animated fadeInLeft')
            $('.page4-right').removeClass('hidden').addClass('animated fadeInRight')
            break;
          case 5:

            break;
        }

      }
    }
  }

</script>

<style scoped>
  .page-wrap {
    height: 100%;
    overflow: scroll;
  }

  .page-wrap>div {
    height: 100%;
  }

  .page-one {
    background: url('../assets/background-p1.png');
    background-size: cover;
  }

  .page-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    /* background-color: #000; */
    width: 70%;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .page1-left {
    width: 43%;
    height: 100%;
    float: left;
    /* background: red; */
  }

  .page1-right {
    float: left;
    width: 57%;
    height: 100%;
  }

  .page-three {
    background: url('../assets/background-p3.png');
    background-size: cover;
  }

  .page-five {
    background: url('../assets/background-p5.png');
    background-size: cover;
  }

  .ul-text {
    width: 80%;
    height: 30px;
    margin: 0 auto;
  }

  .page1-left-middle {
    margin: 20px 0 40px;
    color: #c8dff4;
    font-size: 20px;
  }

  .ul-text li {
    box-sizing: border-box;
    width: 33.3%;
    float: left;
    list-style-type: none
  }

  .ul-text li:nth-child(1) {
    border-right: 1px solid #c8dff4;
  }

  .ul-text li:nth-child(2) {
    border-right: 1px solid #c8dff4;
  }
  /* page2 */

  .page2-left,
  .page2-right {
    float: left;
    width: 50%;
    height: 100%;
  }

  .image-wrap {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }

  .image-wrap img {
    width: 100%;
  }

  .page2-text {
    width: 80%;
    margin: 0 auto;
    text-align: left
  }

  .image-icon {
    position: absolute;
  }

  .image-left-icon {
    width: 40%;
    position: absolute;
    left: 47%;
    top: 40%;
  }

  .image-right-icon-1 {
    width: 15%;
    position: absolute;
    left: 20%;
    top: 30%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .image-right-icon-2 {
    width: 20%;
    position: absolute;
    left: 50%;
    top: 85%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .image-right-icon-3 {
    width: 15%;
    position: absolute;
    left: 90%;
    top: 57%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .image-right-icon-4 {
    width: 20%;
    position: absolute;
    left: 70%;
    top: 20%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  /* page3 */

  .page3-left,
  .page3-center,
  .page3-right {
    width: 25%;
    float: left;
    margin: 0 4%;
  }

  .page3-card {
    background: white;
  }

  .page3-left>.page3-card {
    border: 2px solid #007dbf;
  }

  .page3-center>.page3-card {
    border: 2px solid #00306b;
  }

  .page3-right>.page3-card {
    border: 2px solid #61b250;
  }

  .card-title {
    padding-top: 25px;
  }

  .card-content {
    padding: 25px;
    text-align: left;
    height: auto;
    min-height: 160px;
  }

  .card-content>p {
    font-size: 18px;
    line-height: 22px;
  }

  .page3-left .card-title>span {
    color: #0072ba;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #0072ba;
  }

  .page3-left .card-title-sub>span {
    color: #0072ba;
    font-size: 18px;
    font-weight: 400
  }



  .page3-center .card-title>span {
    color: #00306b;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #00306b;
  }

  .page3-center .card-title-sub>span {
    color: #00306b;
    font-size: 18px;
    font-weight: 400
  }


  .page3-right .card-title>span {
    color: #61b250;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #61b250;
  }

  .page3-right .card-title-sub>span {
    color: #61b250;
    font-size: 18px;
    font-weight: 400
  }
  /* page4 */

  .page4-left,
  .page4-right {
    box-sizing: border-box;
    float: left;
    width: 50%;
  }

  .page4-left .page-cycle {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border: 2px solid #007dbf;
    display: inline-block;
    border-radius: 50%;
    left: 100%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .page4-right .page-cycle {
    position: absolute;
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #007dbf;
    left: -11px;
    top: 220px
  }

  .page4-left {
    border-right: 2px solid #007dbe
  }

  .page4-left .image-wrap {
    float: right;
    margin-right: 50px;
  }

  .page4-right .image-wrap {
    float: left;
    margin-left: 50px;
    margin-top: 150px;
  }

  .page-four,
  .page-two {
    background: white;
  }

  .page-four .image-wrap {
    width: 60px;
  }

  .page4-left .page4-text {
    float: right;
  }

  .page4-right .page4-text {
    float: left;
  }

  .page4-left .page4-text p {
    width: 320px;
    text-align: left;
    float: right;
    padding-right: 50px;
  }

  .page4-right .page4-text p {
    width: 320px;
    text-align: left;
    float: left;
    padding-left: 50px;
  }

  .page4-left-top {
    position: relative;
    height: 150px;
  }

  .page4-left-bottom {
    position: relative;
    margin-top: 150px;
    height: 150px;
  }

  .page4-left .page4-title {
    font-size: 22px;
    text-align: right!important;
    font-weight: bold;
    color: #007dba;
    padding-right: 50px;
  }

  .page4-right {
    position: relative;
  }

  .page4-right .page4-title {
    font-size: 22px;
    text-align: left!important;
    font-weight: bold;
    color: #007dba;
    padding-right: 50px;
  }

  .page-five p {
    color: white;
  }

  .page-five .image-wrap {
    width: 50px;
  }

  .page-five img {
    opacity: 0.6
  }

  .page-footer {
    position: absolute;
    bottom: 6%;
    left: 50%;
    /* background-color: #000; */
    width: 80%;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .company-info {
    height: 80px;
  }

  .company-info li {
    box-sizing: border-box;
    width: 33.3%;
    float: left;
    list-style-type: none;
    padding: 0 4%;
  }

  .page5 p {
    font-size: 18px;
    text-align: left;
  }
.nextButton{
  position: absolute;
  bottom: 10px;
  left:50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
  .page3-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    -ms-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);

    margin-top: -5px;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -moz-transition: all .2s linear;
  }
  /* animation */
/* @-webkit-keyframes gogogo {
    0%{
        
        -webkit-transform: rotate(0deg);
       border:5px solid red;
    
    }
    50%{
        -webkit-transform: rotate(180deg);
        background:black;
       border:5px solid yellow;
    }
    100%{
        -webkit-transform: rotate(360deg);
        background:white;
       border:5px solid red;
    }
}
 
.loading{
   border:5px solid black;
    border-radius:40px;
    width: 28px;
    height: 188px;
   -webkit-animation:gogogo 2s infinite linear ;
    margin:100px;
 
} */
</style>
